
<template>
  <el-dialog v-dialogDrag :visible.sync="currentDialogVisible" :top="common.getDialogTop()" title="批量导出操作" class="dialog-container" width="680px" append-to-body>
    <!--238货主地址，501货主，1696银行账号，1627司机，1628司机合同，1629车辆管理-->
    <el-alert v-if="[4,238,501,1696,1627,1628,1629,1629].indexOf(options.menu_Id)>=0" :closable="false" title="导出数据包含敏感数据，请妥善保护好导出的文件" type="error" class="alert-msg">
    </el-alert>
    <el-alert v-else :closable="false" title="点击左侧导出模板导出进行导出数据" type="success" class="alert-msg">
    </el-alert>
    <el-row ref="uploadRef" :gutter="20">
      <el-col :span="10">
        <ul>
          <li v-for="(item, index) in vueDataList" :key="index" :class="{active: currentTemplate === item}" class="template-item" @click="selectTemplate(item)">
            {{ item.label }}
          </li>
        </ul>
        <slot name="export-module-list"></slot>
      </el-col>
      <el-col :span="14">
        <el-scrollbar :noresize="false" :native="false" wrap-class="scrollbar-wrap">
          <el-tag v-for="(vueInfo, index) in currentTemplate.vueData" :key="index" class="margin-top-10 margin-right-10">{{ vueInfo.cnName }}
            <span v-if="vueInfo.aliasName" class="sub-title">别名：{{ vueInfo.aliasName }}</span>
            <span v-if="vueInfo.colExpression" class="sub-title">表达式：{{ vueInfo.colExpression }}</span>
          </el-tag>
        </el-scrollbar>
      </el-col>
    </el-row>
    <template :slot="'tempExport'">
      <slot :name="'blank-tempExport'"></slot>
    </template>
    <div class="margin-10" v-html="importMsg">{{ importMsg }}</div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="currentDialogVisible = false">取 消</el-button>
      <el-button :loading="isLoading" type="primary" icon="el-icon-yrt-daochu1" @click="startExport">开始导出</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 导出方法
    exportData: {
      type: Function,
      default: () => {
        return () => {};
      }
    },
    options: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data () {
    return {
      // 当前选中菜单下的导出模板列表
      vueDataList: [],
      // 当前选中模板
      currentTemplate: {},
      isLoading: false,
      isInit: false,
      // 导出消息
      importMsg: null
    };
  },
  computed: {
    // 显示窗口
    currentDialogVisible: {
      get: function () {
        return this.visible;
      },
      set: function (val) {
        this.$emit("update:visible", val);
      }
    }
  },
  watch: {},
  methods: {
    // 获得模板
    getTemplateList () {
      // if (this.isInit) return;
      // this.isInit = true;
      var url = "/api/sys/export/getExportColList";
      var params = {
        exportInfo_Id: this.options.exportInfo_Id,
        openGroupBy: this.options.openGroupBy,
        groupBy: this.options.groupBy
      };
      this.common.ajax(
        url,
        params,
        res => {
          this.common.showMsg(res);
          if (res.result) {
            // 初始化标准模板
            var vueData = res.data.map((item, index) => {
              return {
                cnName: item.cnName,
                colExpression: item.colExpression,
                aliasName: item.aliasName,
                key: index
              };
            });

            this.vueDataList = [
              {
                vueData_Id: 0, // 0表示为主模板
                exportInfo_Id: 0,
                label: "系统标准模板",
                vueData: vueData
              }
            ];
            this.currentTemplate = this.vueDataList[0];
          }

          // 加载vueData列表
          this.loadVueDtaList();
        },
        this.$refs.uploadRef
      );
    },
    // 加载VueData列表
    loadVueDtaList () {
      this.isLoading = true;
      var exportInfo_Id = this.options.exportInfo_Id;
      var url = "/api/sys/export/getExportVueDataList";
      var params = {
        exportInfo_Id: exportInfo_Id
      };

      this.common.ajax(
        url,
        params,
        res => {
          this.common.showMsg(res);
          if (res.result) {
            res.data.forEach(item => {
              var vueDataItem = JSON.parse(item.vueData);
              vueDataItem.vueData_Id = item.vueData_Id;
              this.vueDataList.push(vueDataItem);
            });
          }
          this.isLoading = false;
        },
        this.$refs["el-main"]
      );
    },
    // 开始导出
    startExport () {
      var exportInfo_Id = this.options.exportInfo_Id;
      var vueData_Id = this.currentTemplate.vueData_Id;
      this.exportData(exportInfo_Id, vueData_Id);
    },
    // 选中模板
    selectTemplate (item) {
      this.currentTemplate = item;
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog-container {
  ::v-deep .el-upload-list {
    margin-right: 20px;
  }
  ::v-deep .scrollbar-wrap {
    max-height: 400px;
    overflow-x: hidden;
    padding: 0px;
    .el-scrollbar__view .el-tag:last-child {
      margin-bottom: 30px;
    }
  }
  .template-item {
    margin: 10px 0 0 10px;
    padding: 10px;
    background-color: rgb(247, 250, 252);
    border: 1px solid #c8e3ff;
    border-radius: 5px;
    cursor: pointer;
    &.active {
      background-color: #409eff;
      color: #fff;
    }
  }
  .sub-title {
    color: #999;
    margin-left: 10px;
  }
}
</style>
